<template>
  <div class="wrapper">
  <swiper :options="swiperOption" v-if='showSwiper'>
      <!-- slides -->
      <swiper-slide v-for='item of list' :key='item.id'>
        <img class='swiper-img' :src="item.imgUrl" />
      </swiper-slide>

     <div class="swiper-pagination"  slot="pagination"></div>

    </swiper>
    </div>
</template>

<script>
  export default {
    name:'HomeSwiper',
    props:{
      list:Array
    },
    data(){
      return{
        swiperOption: {
          pagination:'.swiper-pagination',
          loop:true
        }
      }
    },
    computed:{
      showSwiper(){
        return this.list.length
      }
    }

  }
</script>

<style lang="stylus" scoped>
  .wrapper >>>.swiper-pagination-bullet
      background :#fff !important
  .wrapper
     overflow :hidden
     width :100%
     height :0
     padding-bottom :30.48%
     background :#eee
     .swiper-img
      width :100%

</style>
